.reaction-box {
  form { margin-bottom: 0; }
  .new_reaction { float: left; margin-right: 2px; }
  .dropdown-menu {
    .new_reaction { float: none; }
  }
  .emoji { display: inline-block; width: 18px; height: 18px; margin-right: 3px; }

  display: flex;

  .reaction-item {
    display: flex;
    align-items: center;
    align-content: center;
  }

  .add-reactions-options {
    display: flex;
  }
}

.reaction-summary-item {
  border: 0;
  padding: 6px 6px;
  height: 36px;
  overflow: hidden;
  line-height: 100%;
  margin-right: 2px;
  color: #444;
  display: inline-block;
  border-radius: 3px;
  border: 1px solid #f0f0f0;

  .emoji { display: inline-block; width: 18px; height: 18px; margin-right: 3px; }

  &.selected {
    background: rgba(190, 211, 240, 0.23);
  }
}

.add-reactions-options-item {
  .emoji { width: 18px; height: 18px; margin-right: 3px; }
}

.add-reaction-btn {
  color: #ccc;
  i.fas { vertical-align: middle; font-size: 22px; }
  &:hover {
    color: #555;
  }
}

.add-reaction-popover.dropdown-menu {
  padding: 13px;
  width: 320px;

  .dropdown-divider {
    margin: 5px 0;
    background: #f0f0f0;
  }

  .reaction-item {
    padding: 5px 5px;
    text-align: center;

    &:hover {
      background: #f7f7f7;
    }
  }
}
